<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纯CSS 渐变色动画边框</title>
    <style>
      html,
      body,
      .box {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      body {
        background-color: #222;
      }
      .box {
        font-size: 2.5em;
        width: 10em;
        height: 5em;
        background-color: #111;
        border-radius: 0.5em;
        text-align: center;
        line-height: 1.5em;
        font-family: sans-serif;
        position: relative;
        animation: animate_text 2s linear infinite alternate;
      }
      .box::before {
        content: "";
        position: absolute;
        width: calc(100% + 10%);
        height: calc(100% + 20%);
        border-radius: 0.5em;
        z-index: -1;
        background-image: linear-gradient(
          60deg,
          aquamarine,
          cornflowerblue,
          goldenrod,
          hotpink,
          salmon,
          lightgreen,
          sandybrown,
          violet
        );
        background-size: 300%;
        animation: animate_bg 5s infinite;
      }
      @keyframes animate_bg {
        0%,
        100% {
          background-position: 0%, 50%;
        }
        50% {
          background-position: 100%, 50%;
        }
      }
      @keyframes animate_text {
        from {
          color: lime;
        }
        to {
          color: yellow;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      you are my<br />
      FAVORITE
    </div>
  </body>
</html>
